<script>
import BaseDialog from "@/components/BaseDialog/index.vue";
import Component from "vue-class-component";
import { getToken } from "@/utils/auth";
import { ref } from "@vue/composition-api";
@Component({
  name: "UploadDialog",
  setup() {
    const upload = ref(null);
    return { upload };
  }
})
export default class UploadDialog extends BaseDialog {
  get title() {
    return this.$t("upload");
  }

  get confirmBtnText() {
    return this.$t("confirm.btnConfirm");
  }

  get cancelBtnText() {
    return this.$t("confirm.btnCancel");
  }

  get basePath() {
    return process.env.VUE_APP_BASE_API;
  }

  get uploadUrl() {
    return (
      this.basePath +
      "/index.php/index/goods/multi?token=" +
      getToken() +
      "&email=" +
      this.$store.state.user.email
    );
  }

  attrs = {
    width: "600px"
  };

  handleDownloadTemplate(){
    window.open("http://8.140.8.232/demo.xlsx")
  }

  renderBody(h) {
    return (
      <el-upload
        ref="upload"
        action={this.uploadUrl}
        name="excel"
        {...{
          props: {
            "on-success": this.handleSuccess
          }
        }}
      >
        <el-button size="small" type="danger">
          {this.$t("btnUpload")}
        </el-button>
        <el-button type="primary" size="small" on-click={this.handleDownloadTemplate}>{this.$t("download-template")}</el-button>
        <div slot="tip" class="el-upload__tip">
          {this.$t("uploadTooltip")}
        </div>
      </el-upload>
    );
  }

  handleSuccess(response, file, fileList) {
    if (response.code == 0) {
      this.$message.success(this.$t("uploadMessage"));
      this.upload && this.upload.clearFiles();
      this.closeDialog();
      this.$emit("change");
    }
  }
}
</script>
